/*
 * Tencent is pleased to support the open source community by making TKEStack
 * available.
 *
 * Copyright (C) 2012-2021 Tencent. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use
 * this file except in compliance with the License. You may obtain a copy of the
 * License at
 *
 * https://opensource.org/licenses/Apache-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OF ANY KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations under the License.
 */
/**
 * namespace下拉选择组件
 */
import React, { useState, useEffect, useContext, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { CHANGE_NAMESPACE, StateContext, DispatchContext } from '../context';
import { t, Trans } from '@tencent/tea-app/lib/i18n';
import { isEmpty } from '@src/modules/common/utils';
// import { router } from '@src/modules/cluster/router.project';
import { router } from '@src/modules/cluster/router';
import { Select, Text } from '@tencent/tea-component';
import { RecordSet } from '@tencent/ff-redux/src';
import { Resource } from '@src/modules/common/models';

// 下边props没有用这个interface因为使用后Select会你报一些类型的问题，感觉还不太好整合，有时间整合下
interface NamespaceSelectProps {
  namespaces: RecordSet<Resource>;
}
const i = 0;
const NamespaceSelect = React.memo((props: { namespaces: any }) => {
  const route = useSelector(state => state.route);
  const urlParams = router.resolve(route);
  const { clusterId, projectName } = route.queries;
  const { namespaces = {} } = props;
  const hpaDispatch = useContext(DispatchContext);
  const hpaState = useContext(StateContext);
  const { namespaceValue } = hpaState;

  /**
   * 初始化namespace选项为第一个，对应初始化浏览器URL数据
   */
  useEffect(() => {
    if (!isEmpty(namespaces) && namespaces.recordCount) {
      hpaDispatch({
        type: CHANGE_NAMESPACE,
        payload: { namespaceValue: namespaces?.records?.[0]?.value ?? 'default' }
      });

      // 如果是业务侧，
      if (projectName && !namespaces.records[0].spec.clusterName) {
        router.navigate(urlParams, { ...route.queries, clusterId: namespaces.records[0].spec.clusterName });
      }
    }
  }, [namespaces]);

  const selectStyle = useMemo(() => ({ display: 'inline-block', fontSize: '12px', verticalAlign: 'middle' }), []);
  return (
    <div style={selectStyle}>
      <Text theme="label" verticalAlign="middle">
        {t('命名空间')}
      </Text>
      <Select
        type="native"
        size="s"
        options={namespaces.records}
        style={{ width: '130px', marginRight: '5px' }}
        value={namespaceValue}
        onChange={selectedNamespace => {
          hpaDispatch({
            type: CHANGE_NAMESPACE,
            payload: { namespaceValue: selectedNamespace }
          });

          // namespace选项改变时对应改变路由中的参数
          if (projectName) {
            namespaces.records.forEach(item => {
              if (item.value === selectedNamespace) {
                router.navigate(urlParams, { ...route.queries, clusterId: item.spec.clusterName });
              }
            });
          } else {
            router.navigate(urlParams, { ...route.queries, np: selectedNamespace });
          }
        }}
        placeholder={namespaces.recordCount ? '' : t('无可用命名空间')}
      />
    </div>
  );
});

export default NamespaceSelect;
